* {
    margin: 0;
    padding: 0;
    /* outline: 1px solid skyblue;  */
}

/*  CSS4 变量 */
:root {
    --weui-FG-1: rgba(255, 255, 255, 0.5);
    --weui-BG-0: #111;
    --weui-BG-1: #1e1e1e;
}

body,
html {
    height: 100%;
}

body {
    /* css 继承 */
    font-family: -apple-system-font, sans-serif;
    /* 仅在-apple-system-font中，使用 sans-serif 字体*/
    /* 手机网页 要加 -apple-system-font */
    background-color: var(--weui-BG-0);
    color: rgba(255, 255, 255, 0.8);
}

.page {
    position: absolute;
    /*绝对定位 脱离文档流*/
    /* 格式化上下文 */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    /*内部滚动*/
    -webkit-overflow-scrolling: touch;
    /*顺滑 跟手*/
}

.page__hd {
    /* height: 200vh; */
    /* viewport 相对视窗单位 */
    padding: 40px;
}

.page__title {
    text-align: left;
    font-size: 20px;
    font-weight: 400;
}

.page__desc {
    margin-top: 4px;
    color: var(--weui-FG-1);
    text-align: left;
    font-style: 14px;
}

.page__bd_spacing {
    padding: 0 16px;
}

.page__ft {
    padding-top: 40px;
    padding-bottom: 10px;
    text-align: center;
}

.page__ft img {
    height: 19px;
    filter: invert(100) hue-rotate(170deg);
}

/*  CSS格式上下文 概念
    flex 可以阶段移动端大部分布局的需求 */
.weui-flex {
    /*  解决兼容性问题
        flex 实验室阶段 W3C （前身 box 布局）
        chrome 需要先支持 用 -webkit-flex 前缀
        -webkit chrome 前缀
        -ms-flex 前缀
    */
    display: -webkit-box;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
}

.weui-flex__item {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

.weui-flex__item .placeholder {
    text-align: center;
    margin: 5px;
    padding: 0 10px;
    background-color: var(--weui-BG-1);
    height: 2.3em;
    /* rem 相对根元素字体大小 单位 */
    /* em 相对自身字体大小 单位*/
    line-height: 2.3;
    color: var(--weui-FG-1);
}